 <template>
 	<view class="container">
 		<uni-forms :rules="rules" :model="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
 			<uni-forms-item name="equipmentId" required label="设备识别码">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.equipmentId"
 					placeholder="请输入设备识别码"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="equipmentName" required label="设备名">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.equipmentName"
 					placeholder="请输入设备名"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item label="单位名称" required name="clientId">
				<zxz-uni-data-select v-model="formData.clientId" filterable :localdata="clientOptions"/>
 			</uni-forms-item>
			<uni-forms-item label="设备类型" required name="type">
				<zxz-uni-data-select v-model="formData.type" filterable :localdata="typeOptions">
				</zxz-uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="address" required label="安装位置">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.address"
							   placeholder="请输入安装位置"></uni-easyinput>
			</uni-forms-item>
 			<uni-forms-item required name="startTime" label="服务起日期">
 				<uni-datetime-picker timestamp v-model="formData.startTime"></uni-datetime-picker>
 			</uni-forms-item>
 			<uni-forms-item required name="endTime" label="服务止日期">
 				<uni-datetime-picker timestamp v-model="formData.endTime"></uni-datetime-picker>
 			</uni-forms-item>
 			<uni-forms-item name="inputTime" label="入库时间">
 				<uni-datetime-picker timestamp v-model="formData.inputTime"></uni-datetime-picker>
 			</uni-forms-item>
 			<uni-forms-item name="price" label="服务费">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.price"
 					placeholder="请输入服务费"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="manufactor" label="厂家">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.manufactor"
 					placeholder="请输入厂家"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="manufactorPhone" label="厂家电话">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.manufactorPhone"
 					placeholder="请输入厂家电话"></uni-easyinput>
 			</uni-forms-item>
			<uni-forms-item name="simId" label="SIM卡">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.simId"
							   placeholder="请输入SIM卡"></uni-easyinput>
			</uni-forms-item>
 			<uni-forms-item name="salePrice" label="销售价格">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.salePrice"
 					placeholder="请输入销售价格"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="equipmentModel" required label="设备型号">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.equipmentModel"
 					placeholder="请输入设备型号"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="heartbeatDuration" required label="心跳时长(小时)">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.heartbeatDuration"
 					placeholder="请输入心跳时长(小时)"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="addrMonitor" label="监控地址">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.addrMonitor"
 					placeholder="请输入监控地址"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="dockHost" label="消控室对接主机">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.dockHost"
 					placeholder="请输入消控室对接主机"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="dockPlace" label="可对接场合">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.dockPlace"
 					placeholder="请输入可对接场合"></uni-easyinput>
 			</uni-forms-item>
 			<uni-forms-item name="dockType" label="对接方式">
 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.dockType"
 					placeholder="请输入对接方式"></uni-easyinput>
 			</uni-forms-item>
			<uni-forms-item name="protocolType" label="监控地址">
				<uni-easyinput type="text" :inputBorder="true" v-model="formData.protocolType"
							   placeholder="请输入监控地址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="dockPhoto" label="对接图片">
				<UploadImage
				  :uploadedImages="dockPhotoList"
				  :uploadUrl="this.$baseUrl+'/api/files/upload'">
				</UploadImage>
			</uni-forms-item>
 		</uni-forms>
 		<button type="primary" @click="submit('form')">提交</button>
 	</view>
 </template>

 <script>
	import request from '@/util/request';
	import UploadImage from '@/common/component/UploadImage.vue';
 	export default {
		components:{UploadImage},
		onLoad(options) {
			var equipmentStr = decodeURIComponent(options.equipment);
			const equipment = JSON.parse(equipmentStr);
			this.formData.id = equipment.id;
			this.formData.equipmentId = equipment.equipmentId;
			this.formData.equipmentName = equipment.equipmentName;
			this.formData.systemId = equipment.systemId;
			this.formData.type = equipment.type;
			this.formData.typeName = equipment.typeName;
			this.formData.clientId = equipment.clientId;
			this.formData.clientName = equipment.clientName;
			this.formData.address = equipment.address;
			this.formData.startTime = equipment.startTime;
			this.formData.endTime = equipment.endTime;
			this.formData.inputTime = equipment.inputTime;
			this.formData.price = equipment.price;
			this.formData.deviceBindingSim = equipment.deviceBindingSim;
			this.formData.simId = equipment.simId;
			this.formData.updateTime = equipment.updateTime;
			this.formData.manufactor = equipment.manufactor;
			this.formData.manufactorPhone = equipment.manufactorPhone;
			this.formData.salePrice = equipment.salePrice;
			this.formData.equipmentModel = equipment.equipmentModel;
			this.formData.heartbeatDuration = equipment.heartbeatDuration;
			this.formData.protocolType = equipment.protocolType;
			this.formData.addrMonitor = equipment.addrMonitor;
			this.formData.url = equipment.url;
			this.formData.appkey = equipment.appkey;
			this.formData.secret = equipment.secret;
			this.formData.dockPhoto = equipment.dockPhoto;
			this.formData.dockHost = equipment.dockHost;
			this.formData.dockPlace = equipment.dockPlace;
			this.formData.dockType = equipment.dockType;
			this.formData.operatorName = equipment.operatorName;
			console.log(this.formData)
		},
		mounted() {
			this.getClientOptions();
			this.getTypeOptions();
			this.getSimOptions();
			this.initdockPhotoList()
		},
 		data() {
 			return {
				headers: {
					token:  this.$store.state.userInfo.token,
				},
				dockPhotoList: [],
 				clientOptions: [],
 				typeOptions: [],
				searchSim: '',
 				simOptions: [],
				simTotal: '',
 				formData: {},
 				index: 0,
 				show: false,
 				rules: {
 					// price: {
 					// 	rules: [{
 					// 			required: true,
 					// 			errorMessage: '请输入服务费'
 					// 		},
 					// 		{
 					// 			format: 'double',
 					// 			errorMessage: '服务费必须是数字'
 					// 		}
 					// 	]
 					// },
 					heartbeatDuration: {
 						rules: [{
 								required: true,
 								errorMessage: '请输入心跳时长'
 							},
 							{
 								format: 'number',
 								errorMessage: '心跳时长必须是数字'
 							}
 						]
 					},
 				}
 			}
 		},
 		methods: {
			initdockPhotoList() {
				this.dockPhotoList = this.formData.dockPhoto ? this.formData.dockPhoto.split(',').map(url => {
					return {url}
				}) : [];
			},
			getClientOptions() {
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = this.$store.state.userInfo.isAllClient;
				let clientIds;
				if (isAllClient === "1") {
					clientIds = this.$store.state.userInfo.clientIds;
				} else {
					clientIds = [];
				}
				request.get("/client/listbyName?organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
					if (res.code === '200') {
						res.data.forEach(item => {
							this.clientOptions.push({
								value: item.id,
								text: item.name
							})
						})
					}
				})
			},
			getTypeOptions() {
				request.get("/equipment-type/all?systemId=" + this.formData.systemId).then(res => {
					if (res.code === '200') {
						res.data.forEach(item => {
							this.typeOptions.push({
								value: item.id,
								text: item.name
							})
						})
					}
				})
			},
			// 获取要绑定的SIM列表
			getSimOptions() {
				let level = this.$store.state.userInfo.level;
				let organizationId = this.$store.state.userInfo.organization;
				let isAllClient = this.$store.state.userInfo.isAllClient;
				let clientIds;
				if (isAllClient === "1") {
					clientIds = this.$store.state.userInfo.clientIds;
				} else {
					clientIds = [];
				}
				request.get("/sim-input-store/appAll?SIMId=" + this.searchSim + "&organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
					res.data.forEach(item => {
						this.simOptions.push({
							value: item.id,
							text: item.simId
						})
					})
				})
			},
			// 选择绑定SIM
			selectedSim(option) {
				this.form.simInputStoreId = option.id
				this.form.simId = option.simId
			},
 			submit(ref) {
				this.dockPhotoList.forEach((item,index)=>{
					if(index==0){
						this.formData.dockPhoto=item.url
					}else{
						this.formData.dockPhoto+=","+item.url
					}
				})
 				console.log(this.formData);
 				this.$refs[ref].validateField(['price', 'heartbeatDuration']).then(res => {
					this.formData.operatorId = this.$store.state.userInfo.id
					request.post("/equipment-input-store/edit", this.formData).then(res => {
						if (res.code === '200') {
							uni.showToast({
								title: "编辑成功",
								icon:'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: "编辑失败",
								icon:'error',
								duration: 2000
							});
						}
					})
 				}).catch(err => {
 					console.log('err', err);
 				})
 			},
 		}
 	}
 </script>
 <style scoped>
 	.container {
 		margin: 15px;
 	}

 	.uni-input-border {
 		padding: 0 10px;
 		height: 35px;
 		width: 100%;
 		font-size: 14px;
 		color: #666;
 		border: 1px #e5e5e5 solid;
 		border-radius: 5px;
 		box-sizing: border-box;
 	}
 </style>
